<template>
  <div class="player-list" style="width: 100%">
    <van-popup
      @close="close"
      v-model:show="flag"
      position="bottom"
      :style="{
        height: '70%',
        width: '90%',
        marginBottom: '20px',
        borderRadius: '16px',
        left: '5%',
      }"
    >
      <div class="pop">
        <h3 class="title">当前播放({{ store.state.musicList.length }})</h3>
        <div class="edit">
          <div class="left">
            <div
              v-if="store.state.PlayerStatus === 0"
              @click="checkPlayerStatus(0)"
            >
              <i class="iconfont icon-xunhuan"></i>
              列表循环
            </div>
            <div
              v-if="store.state.PlayerStatus === 1"
              @click="checkPlayerStatus(1)"
            >
              <i class="iconfont icon-suiji"></i>
              随机播放
            </div>
            <div
              v-if="store.state.PlayerStatus === 2"
              @click="checkPlayerStatus(2)"
            >
              <i class="iconfont icon-24gl-repeatOnce2"></i>
              单曲循环
            </div>
          </div>
          <div class="right">
            <i class="iconfont icon-vue-shanchu" @click="clearMusicList"></i>
          </div>
        </div>
        <div class="sonlist">
          <div
            class="item flex"
            v-for="item in store.state.musicList"
            :key="item.id"
          >
            <div class="soninfoname flex" @click="chackMusic(item.id)">
              <i
                v-if="item.id == store.state.musicInfo.id"
                class="iconfont icon-vue-a-zhengzaizhibozhengzaibofang mg-r20"
                style="color: #f40"
              ></i>
              <div
                class="name"
                :style="
                  store.state.musicInfo.id == item.id
                    ? 'color:#f40'
                    : 'color:#333'
                "
              >
                {{ item.name }}
              </div>
              <div
                class="arname"
                :style="
                  store.state.musicInfo.id == item.id
                    ? 'color:#f40'
                    : 'color:#828282'
                "
              >
                - {{ item.arname }}
              </div>
            </div>
            <div class="del" @click="removeMusic(item.id)">
              <van-icon name="cross" />
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- <van-dialog /> -->
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import useInit from '@/hook/useInit.js'
import { Dialog, showToast } from 'vant'
const store = useStore()
const router = useRouter()
const route = useRoute()

const emit = defineEmits(['chackFlag', 'init'])
const close = () => {
  emit('chackFlag', false)
}

const flag = computed({
  get: () => {
    return store.state.PlayerListFlag
  },
  set: (val) => {
    store.commit('CHANGE_PLAYLIST', val)
  },
})

// 点击切歌  进行切换歌曲操作  拿到id  调用父元素 init方法 执行初始哈
const chackMusic = (id) => {
  console.log(id)
  emit('init', id)
  //判断是否是在播放器内
  console.log(route.path)
  if (route.path == '/playpage') {
    emit('init', id)
  } else {
    useInit(id).then((res) => {
      // 歌曲播放地址
      const data1 = res[0].data.data[0].url
      //切歌
      store.commit('UPDATE_MUSICSRC', data1)

      //切换歌曲信息
      const data2 = res[1].data.songs
      store.commit('ADD_MUSICINFO', data2[0])
    })
  }
}

//删除
const removeMusic = (id) => {
  //判断歌曲列表的个数 1:删除后跳转首页
  if (store.state.musicList.length === 1) {
    store.commit('REMOVE_MUSICFORID', 0)
    router.push('/found')
    store.commit('INIT_ALLDATA', 0)
  }

  // if(store.state.musicList.length===0){
  //
  // }

  //找出要删除歌曲的下表
  const i = store.state.musicList.findIndex((item, index) => {
    return item.id == id
  })

  //判断要删除的歌曲是否是正在播放
  if (store.state.musicInfo.id == id) {
    //判断播放的歌曲是否是列表的最后一个 删除最后一个 初始化第一个歌曲  否则初始化 后一个歌曲
    if (i === store.state.musicList.length - 1) {
      chackMusic(store.state.musicList[0].id)
      store.commit('REMOVE_MUSICFORID', i)
    } else {
      chackMusic(store.state.musicList[i + 1].id)
      store.commit('REMOVE_MUSICFORID', i)
    }
  } else {
    store.commit('REMOVE_MUSICFORID', i)
  }
}

//切换播放列表状态
const checkPlayerStatus = (i) => {
  switch (i) {
    case 0:
      //列表循环
      showToast({
        message: '随机播放',
        position: 'bottom',
      })
      store.commit('UPDATE_PLAYERSTATUS', 1)
      break
    case 1:
      //列表循环
      showToast({
        message: '单曲循环',
        position: 'bottom',
      })
      store.commit('UPDATE_PLAYERSTATUS', 2)
      break

    case 2:
      //列表循环
      showToast({
        message: '列表循环',
        position: 'bottom',
      })
      store.commit('UPDATE_PLAYERSTATUS', 0)
      break

    default:
      break
  }
}

//清空播放列表
const clearMusicList = () => {
  Dialog.confirm({ message: '确定要清空播放列表？' })
    .then(() => {
      store.commit('INIT_ALLDATA')
      store.commit('CHANGE_PLAYLIST', false)
      router.push('/found')
      // on confirm
    })
    .catch(() => {
      // on cancel
    })
}
</script>
<style lang="scss" scoped>
.player-list {
  .pop {
    padding: 15px;
    //    height: 400px;
    overflow: hidden;

    .title {
      margin: 0;
      font-size: 16px;
    }
    .edit {
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #555;
      .left {
        display: flex;
        align-items: center;
      }
      i {
        font-size: 1.4rem;
      }
    }
    .sonlist {
      margin-top: 20px;
      //    overflow-y: scroll;
      .item {
        margin-bottom: 20px;
        .soninfoname {
          .name {
            color: #333;
            font-size: 13px;
          }
          .arname {
            color: #828282;
            font-size: 12px;
            margin-left: 14px;
          }
        }
      }
    }
  }
}
</style>
